<template>
  <el-container class="container">
    <el-aside class="aside" :style="sideStyle">
      <Keys/>
    </el-aside>
    <div id="drag"/>
    <el-main class="main">
      <Tags/>
    </el-main>
  </el-container>
</template>

<script setup>
import bindSideBarDrag from "./utils/drag.js"
import Keys from "@/views/Keys.vue";
import Tags from "@/views/Tags.vue";

let sideWidth = ref(0)
const sideStyle = computed(() => {
  return {width: sideWidth.value > 0 ? sideWidth.value + 'px' : '30%'}
})
onMounted(() => bindSideBarDrag('drag', sideWidth))
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  overflow: hidden;

  .aside {
    flex-grow: 0;
  }

  .main {
    flex-grow: 1;
    padding: 0;
    background-color: #ddd;
  }

  #drag {
    width: 10px;
    cursor: col-resize;
    position: relative;

    &::after {
      content: "";
      display: inline-block;
      width: 4px;
      height: 20px;
      border-left: 1px solid #adabab;
      border-right: 1px solid #adabab;

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}
</style>